<template>
    <el-table :data="tableData" border stripe width="100%">
        <el-table-column label="日期" width="180" prop="time">
        </el-table-column>
        <el-table-column prop="remake" label="备注" width="180">
            <template slot-scope="{ row }">
                <span>{{ row.remake || "暂无" }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" prop=" time" align="right">
            <template slot-scope="{ row }">
                <el-button type="primary" @click="handleEdit(row.id)"
                    >编辑</el-button
                >
                <el-button type="error" @click="handleDel(row.id)"
                    >删除</el-button
                >
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    //
    data() {
        return {
            tableData: [],
        };
    },
    created() {
        this.getFailureListData();
    },
    methods: {
        async getFailureListData() {
            const { data } = await this.$http.get(
                "/services/app/FailureFillService/GetFailureList",
                {
                    params: {
                        userId: sessionStorage.getItem("userId") || "",
                    },
                }
            );

            this.tableData = data.result || [];
        },
        handleEdit(id) {
            this.$router.push("/failureReportAdd?editId=" + id);
        },
        async handleDel(id) {
            const { data } = await this.$http.delete(
                "/services/app/FailureFillService/DeleteFailureFill",
                {
                    params: {
                        id: id,
                    },
                }
            );
            console.log(data, "data");
            if (data.result.result) {
                this.$message({
                    showClose: true,
                    message: data.result.message,
                    type: "success",
                });
            }
            this.getFailureListData();
        },
    },
};
</script>

<style scoped lang="less">
// background-color: #fff;
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px;
}
/deep/ .el-input {
    input {
        background-color: #0a0a0a;
    }
}
/deep/ .el-input__inner::placeholder {
    color: var(--input-fc);
}
/deep/ .el-table__row {
    background-color: var(--color) !important;
    &:hover {
        background-color: var(--color) !important;
    }
}
/deep/
    .el-table--enable-row-hover
    .el-table__body
    tr:hover
    > td.el-table__cell {
    background-color: var(--color) !important;
}
/deep/ .el-table__row:hover {
    background-color: var(--main-bgc);
}
/deep/ .el-table__header {
    background-color: var(--main-bgc) !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px;
}
/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}

/deep/ .el-cascader {
    .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
}

/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
    .cell {
        background-color: var(--main-bgc);
    }
}
.el-table {
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    padding-bottom: 5px;
}
/deep/ .el-input {
    input {
        background-color: var(--input-bgc);
    }
}
/deep/ .el-input__inner::placeholder {
    color: var(--input-fc);
}
/deep/ .el-cascader {
    .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
}
/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}
/deep/ .el-table thead {
    color: var(--main-fc);
    // background-color: red;
    tr {
        background-color: var(--main-bgc);
    }
}
/deep/ .cell {
    color: var(--main-fc);
}
/deep/ .el-table {
    border: none;
    padding: 0;
    background-color: var(--main-bgc);

    .el-table__row {
        border: none;
    }
    input {
        background-color: var(--input-bgc);
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
    .el-table__body-wrapper {
        background-color: #323232 !important;
    }
    color: var(--main-fc);
}
/deep/ .el-table td.el-table__cell,
/deep/ .el-table th.el-table__cell.is-leaf {
    // border-bottom: none;
    background: none;
}
/deep/ .el-table thead.is-group th.el-table__cell {
    background-color: var(--main-bgc);
}
/deep/ td.el-table__cell {
    background: var(--color) !important;
}
/deep/ .el-table /deep/ th.el-table__cell {
    background-color: var(--main-bgc) !important;
}
/deep/ .el-table tr {
    background-color: var(--main-bgc) !important;
}
</style>
